<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.hahaha {
				width: 100%;
				height: 100%;
				position: absolute;
			}

			.heidi {
				width: 100%;
				height: 80%;
				background-color: #000000;
				opacity: 0.5;
				/* position: absolute; */
				margin-top: -584.5px;
				z-index: 9;
			}

			.image {
				background: url(<%=request.getContextPath() %>/img/login.jpg) no-repeat center;
				background-size: cover;
				height: 80%;
				display: flex;
				justify-content: center;
				align-content: center;
				z-index: 99;
			}

			body {
				padding: 0;
				margin: 0;
			}

			.juxing {
				/* width: 40%; */
				height: 80%;
				display: flex;
				justify-content: center;
				/* background-color: black; */
				margin-left: 50%;
				/* padding: 5% 0; */
				margin-top: 38.5px;
				display: flex;
				flex-direction: column;
			}

			.ooo {
				z-index: 999;
			}

			.ooo img {
				width: 396px;
				/* height: 228px; */
			}

			.huafang {
				background-image: url(<%=request.getContextPath() %>/img/logo.png);
				background-size: cover;
				width: 320px;
				height: 152px;
			}

			.container {
				height: 10%;
				/* position: absolute; */
				margin-bottom: 28px;
			}

			.container img {
				width: 210px;
				height: 100px;
				margin-left: 5%;
			}

			.content {
				/* width: 480px; */
				height: 400px;
				/* background-color: red; */
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-top: -45px;
			}

			.banyuan {
				display: inline-block;
				width: 36px;
				height: 50px;
				background: red;
				border-radius: 25px 0px 0 25px;
				background-color: rgba(255, 255, 255, 0.8);
				/* opacity: 0.5; */
			}

			.form-control {
				width: 320px;
				height: 50px;
				border-radius: 0px 25px 25px 0px;
				border: 0;
				padding: 0 20px;
				background-color: rgba(255, 255, 255, 0.8);
				/* opacity: 0.5; */
				outline: none;
				color: #000000;
				border-color: #ffffff;
				z-index: 999;

			}

			.lalala {
				height: 50px;
				display: flex;
				margin-top: 40px;
				z-index: 999;
			}

			.chulai {
				z-index: 999;
			}

			.aaa {
				width: 365px;
				height: 48.4px;
				background-color: #fa7a50;
				border: 0;
				border-radius: 24.2px;
				margin-top: 80px;
			}

			.chabuduo {
				z-index: 999;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.chabuduo span a {
				color: #ffffff;
				font-size: 12px;
				text-decoration: none;
			}

			.www {
				z-index: 999;
				
			}

			.login-logo-tip {
				/* top: 12px; */
				display: inline-block;
				position: absolute;
				/* margin-top: 11px;
			            margin-left: 50px; */
				height: 28px;
				width: 861px;
				/* margin-left: 20px; */
				background-color: #ffefef;
				border: 1px solid #ffc0cc;
				text-align: center;
				line-height: 28px;
				font-size: 11px;
				color: #666;
				margin-top: 35px;
				margin-left: 25%;
				/* vertical-align: center; */
			}

			.foot ul {
				display: flex;
				justify-content: center;
			}

			.foot ul li {
				display: inline-block;
				padding: 0 20px;
				color: #666;
				font-size: 12px;
				margin-bottom: 10px;
			}

			.mgj_footer_hostname {
				margin-top: 20px;
				color: hsla(0, 0%, 40%, .7);
				display: flex;
				justify-content: center;
				margin-bottom: 10px;
				font-size: 13px;
			}
		</style>
	<script type="text/javascript">
		window.onload = function() {
			
			var username = document.getElementById("username");
			var password = document.getElementById("password");
			var btn = document.getElementById("btn");
			//光标进入焦点事件
		
			
			btn.onclick = function() {
				if(username.value == "用户名/手机号" || username.value == "") {
					alert("请输入用户名/手机号");
				}
				else {
					if(password.value == "请输入密码" || password.value == "") {
						alert("请输入密码");
					}
					else {						
						var form = document.getElementById("form");
						form.submit();
					}
				}
			};
		};
	</script>	
	
	</head>
	<body>
		<div class="hahaha">
			<span class="login-logo-tip">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！
			</span>
			<div class="container">
				<div class="www">
					<img src="<%=request.getContextPath() %>/img/logo.png">
				</div>


			</div>

			<div class="image">
				<div class="juxing">
					<div class="ooo">
						<img src="<%=request.getContextPath() %>/img/logo.png" />
					</div>
					<div>
					<form action="<%=request.getContextPath() %>/user/login" method="post" id="form">					
					<div class="content">
						<div class="lalala">
							<span class="banyuan"></span>
							<input   type="text" class="form-control"  id="username" name="username"       placeholder="请输入用户名"></span>
						</div>
						<div class="lalala">
							<span class="banyuan"></span>
							<input type="password"  class="form-control"    placeholder="请输入密码" name="password"   id="password"  placeholder="请输入密码"></span>
						</div>
						<div class="chulai">
							<input class="aaa"    id="btn"    type="button" value="登录" />
						</div>
						<div class="chabuduo">
							<span><a href="<%=request.getContextPath() %>/user/register" >免费注册</a></span>
							<span><a href="">找回密码</a></span>
						</div>
					</div>
				</div>
			</div>
			</form>
</div>
		<!-- <div class="heidi">

			</div> -->
			<div class="foot">
				<div>
					<ul>
						<li>关于我们</li>
						<li>|</li>
						<li>联系我们</li>
						<li>|</li>
						<li><a href="<%=request.getContextPath()%>/login.jsp">管理员入口</a></li>
						<li>意见反馈</li>
						<li>|</li>
						<li>规则中心</li>
						<li>|</li>
						<li>基本信息</li>
						<li>|</li>
						<li>特色产品</li>
					</ul>
				</div>

				<div class="mgj_footer_hostname"><span>————————————————————————————————————————&ensp;&ensp;&ensp;&ensp;©2019
						dqz.com
						大民主&ensp;&ensp;&ensp;&ensp;————————————————————————————————————————</span></div>
			</div>
		</div>
		<script type="text/javascript">

		</script>
	</body>
</html>
